import React, {Component} from 'react';
import './index.css';
import {InputNumber, Slider, Radio, Select, Upload, Icon, Checkbox, Button, Input, Row, Col} from 'antd';
import AlertInput from '../../common/alertInput';
import Ajax from '../../common/ajax';

class PageList extends Component {

    static defaultProps = {
        onSelect: null
    };

    constructor(props) {
        super(props);

        this.state = {
            visible: false,
            pageList: [],
        };

    }

    render() {
        var _self = this;
        var {pageList} = this.state;

        return (
            <div className="qcyEditor__pagesContainer">
                <div className="qcyEditor__pages">
                    {
                        pageList && pageList.length > 0 ?
                            pageList.map(function (p) {
                                return (
                                    <div
                                        className={`pageItem ${p.active ? 'pageItem_active' : ''} ${p.editable ? 'pageItem_editable' : ''}`}
                                        key={p.id}
                                        onClick={_self._selectPage.bind(_self, p)}
                                    >
                                        <Row>
                                            <Col span={12}>
                                                <span className="pageItem__name">{p.name}</span>
                                                <Input
                                                    defaultValue={p.name}
                                                    className="pageItem__name_editable"
                                                    onInput={(e) => {
                                                        _self._pageNameInput(p, e.target.value)
                                                    }}
                                                    onClick={(e) => {
                                                        e.preventDefault()
                                                        e.stopPropagation()
                                                    }}
                                                />
                                            </Col>
                                            <Col span={12}>
                                                <div className="pageItem__icons">
                                                    <Icon
                                                        type="edit"
                                                        onClick={(e) => {
                                                            e.preventDefault()
                                                            e.stopPropagation()
                                                            _self._toEditPage(p)
                                                        }}
                                                    />
                                                    {
                                                        p.type != 0 ?
                                                            <Icon
                                                                type="delete"
                                                                onClick={(e) => {
                                                                    e.preventDefault()
                                                                    e.stopPropagation()
                                                                    _self._delPage(p)
                                                                }}
                                                            />
                                                            : null
                                                    }
                                                </div>
                                                <div className="pageItem__icons_editable">
                                                    <Button
                                                        type="primary"
                                                        size={'small'}
                                                        onClick={(e) => {
                                                            e.preventDefault()
                                                            e.stopPropagation()
                                                            _self._editPage(p)
                                                        }}
                                                        disabled={!p.editName}
                                                    >确定</Button>
                                                    <Button
                                                        size={'small'}
                                                        onClick={(e) => {
                                                            e.preventDefault()
                                                            e.stopPropagation()
                                                            _self._cancelEditPage(p)
                                                        }}
                                                    >取消</Button>
                                                </div>
                                            </Col>
                                        </Row>
                                    </div>
                                )
                            })
                            : null
                    }
                </div>

                <div className="qcyEditor__pagesFoot">
                    <Button
                        onClick={() => {
                            this.setState({
                                visible: true
                            });
                        }}
                        type="primary"
                        ghost
                    >添加页面</Button>
                </div>

                <AlertInput
                    visible={this.state.visible}
                    title={'添加页面'}
                    placeholder={'请输入页面名称'}
                    onOk={this._addPage.bind(this)}
                    onCancel={this._cancelAddPage.bind(this)}
                />
            </div>
        );
    }

    componentDidMount() {
        this._getPageList();
    }

    _getPageList() {
        var _self = this;

        Ajax.G('/admin/Home/getPageList', {}, function (res) {
            var pageList = res.result.pageList;

            pageList = pageList.map(function (p) {
                return {
                    name: p.page_type == 0 ? '首页' : p.page_name,
                    id: p.id,
                    type: p.page_type,
                    state: p.state,
                };
            });

            if (pageList && pageList.length > 0) {
                pageList[0].active = true
            }

            _self.setState({
                pageList
            }, function () {
                _self._selectPage(pageList[0]);
            })
        });
    }

    _addPage(pName) {
        var _self = this;
        var {pageList} = this.state;

        Ajax.P('/admin/Home/addPageSettings', {
            pageName: pName,
            pageType: 1,
        }, function (res) {
            pageList.push({
                name: pName,
                id: res.result
            })
            _self.setState({
                visible: false,
                pageList,
            })
        });
    }

    _selectPage(p) {
        var {pageList} = this.state;
        var curPage;

        pageList.forEach(function (page) {
            if (page.id == p.id) {
                page.active = true;
                curPage = page;
            } else {
                page.active = false;
            }
        })

        this.setState({
            pageList
        })
        this.props.onSelect && this.props.onSelect(curPage);
    }

    _cancelAddPage() {
        this.setState({
            visible: false
        })
    }

    _delPage(p) {
        var _self = this;
        var {pageList} = _self.state;

        Ajax.G('/admin/Home/deletePage', {
            pageId: p.id
        }, function (res) {
            pageList.some(function (page, index) {
                if (page.id == p.id) {
                    pageList.splice(index, 1)
                    return true
                }
            })
            _self.setState({
                pageList,
            })
        });
    }

    _toEditPage(p) {
        var _self = this;
        var {pageList} = _self.state;

        p.editable = true

        _self.setState({
            pageList
        })
    }

    _cancelEditPage(p) {
        var _self = this;
        var {pageList} = _self.state;

        p.editable = false

        _self.setState({
            pageList
        })
    }

    _pageNameInput(p, val) {
        var _self = this;
        var {pageList} = _self.state;

        p.editName = val

        _self.setState({
            pageList
        })
    }

    _editPage(p) {
        var _self = this;
        var {pageList} = _self.state;

        Ajax.P('/admin/Home/editPageSettings', {
            pageId: p.id,
            pageName: p.editName,
        }, function (res) {

            p.name = p.editName
            p.editName = ''
            p.editable = false

            _self.setState({
                pageList,
            })
        });

    }


}

export default PageList;
